<template>
  <div class="content">
    <div class="header">
      <div class="title">大学生兼职信息系统</div>
      <el-menu class="menu el-menu" background-color="rgb(2, 79, 121)" text-color="white">
        <el-menu-item index="1" class="menu-item" @click="$router.push('/home')">首页</el-menu-item>
        <el-menu-item index="2" class="menu-item" @click="$router.push('/partTime')">兼职推荐</el-menu-item>
        <el-menu-item index="3" class="menu-item" @click="$router.push('/communtiy')">社区讨论</el-menu-item>
        <el-menu-item index="4" class="menu-item" @click="$router.push('/login')">个人中心</el-menu-item>
        <el-menu-item index="5" class="menu-item" @click="$router.push('/backstage')">兼职评价</el-menu-item>
        <el-menu-item index="6" class="menu-item" @click="$router.push('/Adminlogin')">后台管理</el-menu-item>
      </el-menu>
    </div>
    <div class="center">
      <div class="pic"></div>
      <div>
        <router-view></router-view>
      </div>
    </div>
    <div class="footer"></div>
  </div>
</template>

<script>
export default {
  name: 'home',

  data() {
    return {

    };
  },

  mounted() {

  },

  methods: {

  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}

.content {
  width: 100%;
  // height: 100vh;
  display: flex;
  flex-direction: column;
  background:rgb(245, 246, 248);

  .header {
    width: 100%;
    height: 60px;
    background-color: rgb(2, 79, 121);
    display: flex;
    flex-direction: row;
    align-items: center;

    .title {
      width: 25%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.25em;
      color: #fff;
    }

    .menu {
      width: 50%;
      height: 100%;
      border: none;
      display: flex;
      justify-content: space-between;
      flex-direction: row;

      .menu-item {
        width:15%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .center {
    width: 100%;
    height: calc(100% - 160px);
    // background-color: blue;
    display: flex;
    flex-direction: column;

    .pic {
      width: 100%;
      height: 300px;
      background: url('../../assets/images/头部图片.jpg') no-repeat;
      background-size: 100% 100%;

    }
  }

  .footer {
    width: 100%;
    height: 100px;
    background-color: rgb(2, 79, 121);
  }
}
</style>